<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧社区</title>
</head>
<link rel="stylesheet" href="../../css/iconfont/iconfont.css">

<body>
    <!-- 头部 -->
    <div class="body">
        <div class="img">
            <div class="wisdom">智慧社区</div>
            <div class="address">
                <div class="addres">
                    <i class="iconfont icon-dizhiguanli"></i>
                    <div class="addres">首尔甜城</div>
                </div>
                <div class="input">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="text" placeholder="搜索关键字">
                </div>
            </div>
            <div class="main">
                <div>
                    <img src="/H5/images/life.png" alt="">
                    <div class="payment">生活缴费</div>
                </div>
                <div>
                    <img src="/H5/images/property.png" alt="">
                    <div class="payment">物业报修</div>
                </div>
                <div>
                    <img src="/H5/images/problem.png" alt="">
                    <div class="payment">问题反馈</div>
                </div>
                <div>
                    <img src="/H5/images/my.png" alt="">
                    <div class="payment">我要帮助</div>
                </div>

            </div>
        </div>
    </div>
    <div class="headlines">
        <!-- 头条 -->

        <div class="head">
            <img src="/H5/images/headlines.png" alt="">
            <div class="about">关于我行对符合条条件的账户111111111</div>
            <div class="mores">
                <div class="yuan"></div>
                <div class="more">更多</div>
            </div>
        </div>
        <img src="/H5/images/loudong.png" alt="">
        <!-- 生活门店 -->
        <div class="shopping">
            <div class="shenghuo">生活门店</div>
            <div class="shopping-list">
                <img src="/H5/images/shenghuo.png" alt="">
                <img src="/H5/images/miaosha.png" alt="">
            </div>
        </div>
        <!-- 资讯 -->
        <div class="news">
            <div class="news-top">
                <div class="news-title">资讯</div>
            </div>
            <div class="news-list">
                <div class="news-left">
                    <div class="ATm">关于调整我行ATM跨行取现手续费收费标准的公示</div>
                    <div class="time">2017-09-05</div>
                </div>
                <img src="/H5/images/ATM.png" alt="">
            </div>
            <div class="news-list">
                <div class="news-left">
                    <div class="ATm">关于调整我行ATM跨行取现手续费收费标准的公示</div>
                    <div class="time">2017-09-05</div>
                </div>
                <img src="/H5/images/ATM.png" alt="">
            </div>
            <div class="news-list">
                <div class="news-left">
                    <div class="ATm">关于调整我行ATM跨行取现手续费收费标准的公示</div>
                    <div class="time">2017-09-05</div>
                </div>
                <img src="/H5/images/ATM.png" alt="">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
        <div>
            <i class="iconfont icon-shouye-shouye"></i>
            <div class="home homes">主页</div>
        </div>
        <div>
            <i class="iconfont icon-mendian"></i>
            <div class="home">商店</div>
        </div>
        <div>
            <i class="iconfont icon-complain"></i>
            <div class="home">消息</div>
        </div>
        <div>
            <i class="iconfont icon-7"></i>
            <div class="home">我的</div>
        </div>

    </div>
    <!-- </div> -->


    <!-- </div> -->
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;

    }

    .body {
        height: 6.44rem;
        background-color: #f6f6f6;

        .img {
            height: 5.2rem;
            background-image: url('../../images/home-bj.png');
            background-repeat: no-repeat;
            background-size: 100% 5.2rem;
            padding: 0 .48rem;

            .wisdom {
                text-align: center;
                font-size: .48rem;
                color: #fff;
                padding: .88rem 0 .76rem;
                /* background-color: aqua; */
            }

            .address {
                height: .62rem;

                /* background-color: aquamarine; */
                display: flex;
                justify-content: space-between;
                margin-bottom: .46rem;

                .addres {
                    width: 100%;
                    display: flex;
                    color: #fff;
                    line-height: .62rem;

                    i {
                        font-size: .38rem;
                    }

                    .addres {
                        font-size: .36rem;
                    }
                }

                .input {
                    display: flex;
                    /* width: 4.58rem; */
                    background-color: #fff;
                    border-radius: .34rem;
                    line-height: .62rem;

                    i {
                        font-size: .28rem;
                        color: #535353;
                        padding-left: .32rem;
                    }

                    input {
                        /* width: 2.84rem;*/

                        padding-left: .12rem;
                        flex: 1;
                        border: 0;
                        font-size: .26rem;
                        color: #535353;
                        outline: none;
                        border-radius: .34rem;
                    }


                }
            }

            .main {
                height: 2.9rem;
                background-color: #fff;
                border-radius: .18rem;
                display: flex;
                justify-content: space-around;
                align-items: center;


                img {
                    width: 1.16rem;
                    height: 1.16rem;
                }

                .payment {
                    font-size: .38rem;
                }
            }
        }
    }

    .headlines {
        padding: 0 .48rem;

        .head {
            padding: .5rem 0;
            display: flex;
            align-items: center;

            img {
                width: 1.3rem;
                height: .48rem;
            }

            .about {
                width: 5.62rem;
                font-size: .4rem;
                padding: 0 .86rem 0 .34rem;
                /* 添加溢出省略号 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .mores {
                display: flex;
                align-items: center;

                .yuan {
                    width: .28rem;
                    height: .28rem;
                    background-color: #ff0015;
                    border-radius: 50%;
                    /* margin-top: .14rem; */
                }

                .more {
                    font-size: .42rem;
                    padding-left: .24rem;
                }


            }

        }

        img {
            height: 3.76rem;

        }

        .shopping {
            .shenghuo {
                font-size: .5rem;
                padding: .64rem 0;

            }

            .shopping-list {
                display: flex;
                justify-content: space-between;

                img {
                    /* width:494; */
                    height: 3.04rem;

                }
            }
        }

        .news {
            .news-top {
                display: flex;
                justify-content: space-between;
                padding: 1.08rem 0 .8rem;

                .news-title {
                    font-size: .5rem;
                }
            }

            .news-list {
                height: 2.44rem;
                /* background-color: aqua; */
                display: flex;
                justify-content: space-between;
                margin-bottom: .78rem;

                .news-left {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 5.6rem;

                    .ATm {
                        font-size: .4rem;

                    }

                    .time {
                        display: flex;
                        align-content: flex-end;
                        color: #707070;
                        font-size: .24rem;
                    }
                }

                img {
                    height: 2.5rem;
                    
                }
            }
        }

    }

    .bottom {
        height: 1.72rem;
        background-color: #fff;
        border-top: solid .02rem #f6f6f6;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        width: 100%;

        i {
            font-size: .56rem;
            color: #0387ff;
        }

        .homes {
            color: #0387ff;
        }

        .home {
            font-size: .34rem;
        }
    }

    .bottom div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script>

    function adapter() {
        //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
        const dpWidth = document.documentElement.clientWidth
        //计算根字体大小
        const rootFonstSize = (dpWidth * 100) / 1125
        //设置根字体大小
        document.documentElement.style.fontSize = rootFonstSize + 'px'
    }
    adapter()
    window.onresize = adapter()

</script>